<template>
  <div>
    <CategoryThree :isDisable="showNum !== 1" />
    <br />
    <SpuList
      v-if="showNum === 1"
      @setSpuData="setSpuData"
      @changShowNum="changePage"
    />
    <AddOrUpdateSpu
      v-if="showNum === 2"
      :toAddSpuData="toAddSpuData"
      @changShowNum="showNum = $event"
    />
    <AddSku
      v-if="showNum === 3"
      :toAddSkuData="toAddSkuData"
      @changShowNum="showNum = $event"
    />
  </div>
</template>

<script>
import CategoryThree from '@/components/CategoryThree'
import AddSku from './addSku/idnex.vue'
import AddOrUpdateSpu from './addOrUpdateSpu'
import SpuList from './spuList'
export default {
  name: 'SPU',
  components: { AddSku, AddOrUpdateSpu, SpuList, CategoryThree },
  data() {
    return {
      showNum: 1, // 1为展示列表组件 2为添加或更新组件 3为添加sku组件
      toAddSpuData: {
        description: '',
        id: undefined,
        spuName: '',
        tmId: undefined
      },
      toAddSkuData: {
        spuName: '',
        id: undefined
      }
    }
  },
  methods: {
    changePage(e) {
      if (isNaN(e)) {
        this.toAddSkuData.spuName = e.spuName
        this.toAddSkuData.id = e.id
        this.showNum = 3
        console.log(this.toAddSkuData)
        return
      }
      this.showNum = e
    },
    setSpuData(data) {
      this.toAddSpuData.description = data?.description || ''
      this.toAddSpuData.id = data?.id || undefined
      this.toAddSpuData.spuName = data?.spuName || ''
      this.toAddSpuData.tmId = data?.tmId || undefined
    }
  }
}
</script>

<style></style>
